<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG TEST</title>

    <style>
    
.container123:hover .wps-logo-path {
  fill: #fff;
  animation: wpsLogo 3s ease-in-out forwards;
  stroke-dasharray: 5px 20px;
}

@keyframes wpsLogo {
    0% {
        stroke-dasharray: 0 1078px;
    }
    100% {
        stroke-dasharray: 1078px 0;
    }
}

.logo-fill {
  animation: wpsLogoFill .5s linear forwards;
}

@keyframes wpsLogoFill {
  from {
    fill: #fff;
  }
  to {
    fill: #FC464D;
  }
}

.wps-text-path {
    transform: scale(0.6);
    animation: wpsTextLogo 3s ease-in-out forwards;
}

@keyframes wpsTextLogo {
    0% {
        stroke-dasharray: 0 500px;
    }
    100% {
        stroke-dasharray: 500px 0;
    }
}
    
    </style>
</head>
<body>
    <div class="container123">123123123</div>
    <div class="container">
      <text style="color: #777;">WPS LOGO SVG DEMO</text>
      <svg id="main-svg" width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="wpslinear" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#FB5A43"/>
            <stop offset="100%" stop-color="#FD3258"/>
          </linearGradient>
        </defs>
        
        <path id="wps-logo-path" class="wps-logo-path" stroke="url(#wpslinear)" stroke-width="1px" transform="translate(80 60)" d="M5.951,5.529C0.932-4.242-4.298-13.08-8.204-22.445c-3.335-7.988-8.203-11.338-17.051-10.342 c-6.274,0.703-12.695,0.103-19.048,0.151c-4.795,0.039-5.713,1.357-3.608,5.444C-36.187-4.423-24.41,18.322-12.613,41.061
	c0.669,1.299,1.611,2.461,2.896,4.385c1.367-1.987,2.49-3.32,3.271-4.819c14.019-27.051,28.115-54.063,41.885-81.24
	c2.773-5.635,5.391-7.69,12.534-7.793c16.377-0.234,33.374-0.166,49.751-0.137c9.004,0.015,12.578,5.566,8.555,13.447
	C88.764-0.839,71.186,33.39,53.661,67.653c-1.655,3.223-3.97,5.215-7.881,5.22c-3.853,0.005-6.284-1.763-7.954-5.063
	c-5.117-10.132-10.386-20.186-15.479-30.327c-0.615-1.23-1.079-3.086-0.571-4.199c2.451-5.376,6.924-10.552,11.426-16.88
	c3.447,8.442,5.874,17.222,10,25c0.732,1.372,1.382,1.851,2.412,3.076c1.03-1.196,2.344-2.251,3.052-3.613
	c11.572-22.227,23.071-44.492,34.58-66.763c3.022-5.859,2.446-6.733-4.404-6.748c-7.344-0.015-14.697,0.259-22.021-0.088
	c-5.313-0.254-8.242,1.909-10.522,6.431C33.447-0.853,20.38,24.503,7.382,49.889c-3.027,5.913-6.123,11.792-9.097,17.729
	c-1.631,3.247-3.97,5.21-7.856,5.278c-4.106,0.078-6.436-2.031-8.159-5.415c-13.003-25.532-26.06-51.04-39.121-76.543
	c-4.414-8.628-8.916-17.212-13.325-25.835c-4.131-8.081-0.884-13.691,8.379-13.701c16.948-0.02,33.057,0.107,50,0
	c4.805-0.029,9.146,1.836,11.26,6.006c4.692,9.268,9.541,18.462,14.219,27.744c0.562,1.118,1.021,2.817,0.552,3.828
	C11.762-5.663,8.979-0.443,5.951,5.529z"/>
        
    
        <svg x="42px" y="150px">
          <path class="wps-text-path" class="" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff; stroke: #6199F2" d="M16,19c-0.738,14.787-2.072,37.126,0,49c1,0.333,2,0.667,3,1
	c0-0.333,0-0.667,0-1c2.229-0.581,2.524-0.831,4-2c0-0.333,0-0.667,0-1c0.667,0,1.333,0,2,0c0.333-0.667,0.667-1.333,1-2
	c0.333,0,0.667,0,1,0c0.333-0.667,0.667-1.333,1-2c0.667,0,1.333,0,2,0c0.333-0.667,0.667-1.333,1-2c0.333,0,0.667,0,1,0
	c0.667-1,1.333-2,2-3c0.667,0,1.333,0,2,0c1-1.333,2-2.667,3-4c0.667,0,1.333,0,2,0c2.912-2.079,0.479-3.207,6-4
	c0.667,1,1.333,2,2,3c0.667,0,1.333,0,2,0c1.333,1.667,2.667,3.333,4,5c0.667,0,1.333,0,2,0c0.333,0.667,0.667,1.333,1,2
	c0.333,0,0.667,0,1,0c0.333,0.667,0.667,1.333,1,2c0.667,0,1.333,0,2,0c1,1.333,2,2.667,3,4c0.667,0,1.333,0,2,0
	c0.333,0.667,0.667,1.333,1,2c1.256,1.16,2.91,1.665,4,3c1-0.333,2-0.667,3-1c2.271-12.342,2.254-36.656,0-49c-1.333,0-2.667,0-4,0
	c0,0.333,0,0.667,0,1c-4.066,1.049-3.468,3.172-6,5c-0.667,0-1.333,0-2,0c-1,1.333-2,2.667-3,4c-0.667,0-1.333,0-2,0
	c-0.667,1-1.333,2-2,3c-1.621,1.44-4.201,2.955-6,4c0,0.667,0,1.333,0,2c2.078,1.094,1.771,1.611,5,2c1.085-1.34,2.744-1.84,4-3
	c0.333-0.667,0.667-1.333,1-2c0.667,0,1.333,0,2,0c0.333-0.667,0.667-1.333,1-2c1.856-1.696,4.231-3.297,7-4c0,9.999,0,20.001,0,30
	c-0.333,0-0.667,0-1,0c-1.077-1.349-2.745-1.841-4-3c-0.333-0.667-0.667-1.333-1-2c-0.667,0-1.333,0-2,0c-1-1.333-2-2.667-3-4
	c-0.667,0-1.333,0-2,0c-1-1.333-2-2.667-3-4c-0.667,0-1.333,0-2,0c-0.333-0.667-0.667-1.333-1-2c-1.695-1.575-3.662-3.114-6-4
	c0,0.333,0,0.667,0,1c-1.667,1-3.333,2-5,3c-0.333,0.667-0.667,1.333-1,2c-0.667,0-1.333,0-2,0c-1,1.333-2,2.667-3,4
	c-0.667,0-1.333,0-2,0c-1,1.333-2,2.667-3,4c-0.667,0-1.333,0-2,0c-2.583,1.858-1.671,3.798-6,5c0-10.333,0-20.667,0-31
	c0.333,0,0.667,0,1,0c1.557,2.45,1.126,0.612,3,2c1,1.333,2,2.667,3,4c0.667,0,1.333,0,2,0c1,1.333,2,2.667,3,4c0.667,0,1.333,0,2,0
	c0.333,0.667,0.667,1.333,1,2c1,0,2,0,3,0c0.944-1.801,1.385-1.575,2-4c-2.333-1.667-4.667-3.333-7-5c-0.667-1-1.333-2-2-3
	c-0.667,0-1.333,0-2,0c-1-1.333-2-2.667-3-4c-0.667,0-1.333,0-2,0c-0.333-0.667-0.667-1.333-1-2c-1.256-1.16-2.917-1.658-4-3
	C18.667,19,17.333,19,16,19z"/>
<path class="wps-text-path" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff;stroke:#F47928" d="M86,19c0,0.667,0,1.333,0,2c-0.333,0-0.667,0-1,0
	c0.333,1,0.667,2,1,3c11.969,2.138,28.359,1.013,42,1c1.732,3.015,5.979,7.352,3,12c-0.333,0-0.667,0-1,0c-0.667,1-1.333,2-2,3 c-0.333,0-0.667,0-1,0s-0.667,0-1,0c0,0.333,0,0.667,0,1c-11.999,0-24.001,0-36,0c-1,1.333-2,2.667-3,4c-0.333,0-0.667,0-1,0 c-2.566,4.627-1.041,15.571-1,22c1.314,0.809,1.178,0.704,2,2c1.333-0.333,2.667-0.667,4-1c0-6.666,0-13.334,0-20
	c7.438-2.745,24.409-1.05,34-1c0-0.333,0-0.667,0-1c1.333,0,2.667,0,4,0c0-0.333,0-0.667,0-1c0.667,0,1.333,0,2,0
	c0-0.333,0-0.667,0-1c1-0.333,2-0.667,3-1c0.333-1,0.667-2,1-3c0.333,0,0.667,0,1,0c0-0.667,0-1.333,0-2c0.333,0,0.667,0,1,0
	c1.229-3.008,0.699-9.206-1-11c-1.278-4.919-5.22-4.844-8-8C114.001,19,99.999,19,86,19z"/>
<path class="wps-text-path" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff;stroke: #50B379" d="M144,68c7.034,1.343,36.729,2.643,43,0
	c3.272-1.379,5.412-5.845,8-8c0-1.667,0-3.333,0-5c0.333,0,0.667,0,1,0c0-0.333,0-0.667,0-1c-0.333,0-0.667,0-1,0
	c-0.333-2.333-0.667-4.667-1-7c-1.333-1-2.667-2-4-3c0-0.333,0-0.667,0-1c-1.333-0.333-2.667-0.667-4-1c0-0.333,0-0.667,0-1
	c-2.333,0-4.667,0-7,0c-9.789-0.039-27.715,2.773-30-5c-0.333,0-0.667,0-1,0c0-2.333,0-4.667,0-7c1.333-1,2.667-2,4-3
	c0-0.333,0-0.667,0-1c12.999,0,26.001,0,39,0c1.139-1.139,0.003-0.398,2-1c0-0.667,0-1.333,0-2c0.333,0,0.667,0,1,0
	c-0.333-1-0.667-2-1-3c-13.999,0-28.001,0-42,0c0,0.333,0,0.667,0,1c-1.333,0.333-2.667,0.667-4,1c-0.656,1.192-1.618,1.42-2,2
	c0,0.667,0,1.333,0,2c-0.667,0.333-1.333,0.667-2,1c-0.333,3.667-0.667,7.333-1,11c1.999,1.721,0.844,2.329,2,4c2,1.667,4,3.333,6,5
	c8.64,0.14,18.988,1.784,29,1c0.667-0.333,1.333-0.667,2-1c0,0.333,0,0.667,0,1c2,0.333,4,0.667,6,1c1.169,2.422,3.515,5.95,2,8
	c-0.325,3.407-0.772,3.676-3,5c-2.409,2.397-7.151,1.995-12,2c-9.666,0-19.334,0-29,0C144.395,64.604,144.119,65.375,144,68z"/>
        </svg>
      </svg>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
